<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击取消跳转</button>
    <div></div>
    <script>
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      //距离跳转还有多少秒
      var time = 5;
      var timer = setInterval(function () {
        if (time === 0) {
          //倒计时事件到 五秒就要跳转
          location.href = 'http://www.baidu.com';
        } else {
          div.innerText = `还有${time}秒跳转页面`;
          time--;
        }
      }, 1000);
      //设置点击取消跳转
      btn.addEventListener('click', function () {
        //取消就是 清除定时器
        clearInterval(timer);
      });
    </script>
  </body>
</html>
